import React from 'react';
import Taro from '@tarojs/taro';
import {AtIcon, AtRate} from "taro-ui";
import {View, Image, RichText, Text} from '@tarojs/components'
import {beforeTime} from '../../../utils/tools'
import './evaluation.scss'

const Evaluation: React.FC<{ recordsTotal: 0; data: []; product_no?: string | undefined; category?: number | undefined; productId?: number | undefined }> = (props) => {
  function previewImage(current, urls) {
    Taro.previewImage({
      current, // 当前显示图片的http链接
      urls // 需要预览的图片http链接列表
    })
  }

  function jump() {
    Taro.navigateTo({url: "/common/evaluation/index?product_no=" + props.product_no + "&category=" + props.category + "&productId=" + props.productId});
  }

  return (
    <View className='evaluation-wrapper'>
      <View className='wrapper-header'>
        <View className='wrapper-header-left'><View className='line'
          style={`background-color: ${process.env.mainColor}`}
        /><View
          className='title'
        >评价({props.recordsTotal || 0})</View></View>
        {props.data && props.data.length > 0 &&
          <View className='wrapper-header-right' onClick={jump.bind(this)}>查看全部<AtIcon value='chevron-right'
            size='14'
            color='#000'
          /></View>}
      </View>
      {props.data && props.data.length > 0 && props.data.map((item: any, index) => <View key={index}
        className='evaluation-item'
      >
        <View className='items'>
          <View className='evaluation-items'>
            <View className='items-left'>
              <Image mode='aspectFill' src={item.photo} />
              <View className='user-name'>
                {item.is_anonymous == 1 && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ? '匿名' : item.nick_name}
                {(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && item.star && item.star > 0 &&
                  <View className='star'>
                    <AtRate
                      className={`star-rate ${process.env.TARO_ENV !== 'h5' ? 'star-rate-weapp' : ''}`}
                      value={Number(item.star)}
                      size={14}
                    />
                    <Text
                      className={`star-scores ${process.env.TARO_ENV !== 'h5' ? 'star-scores-weapp' : ''}`}
                    >{item.star}分</Text>
                  </View>}
              </View>
            </View>
            <View className='time'>{beforeTime(item.pub_date || item.add_date)}</View>
          </View>
          <View className='richText'>
            <RichText className='text' nodes={item.content} />
          </View>
          {item.resource_urls && <View className='content-box'>
            <View className='img-over'>
              {item.resource_urls && item.resource_urls.map((urls, idx) =>
                <Image mode='aspectFill' key={idx} onClick={previewImage.bind(this, urls, item.resource_urls)}
                  className='image' src={urls}
                />
              )}
              {item.resource_urls && item.resource_urls.length >= 3 &&
                <View onClick={previewImage.bind(this, item.resource_urls, item.resource_urls)}
                  className='img-preview-image'
                >图{item.resource_urls.length}</View>}
            </View>
          </View>}
        </View>
        {(index !== props.data.length - 1) && <View className='line-evaluation'>
          <View className='through-line' />
        </View>}
      </View>)}
    </View>
  )
}
Evaluation.defaultProps = {
  data: []
}

export default Evaluation
